<template>
    <div class="TixTableWrap">
        <div class="TixTableWrap-table">
            <a-table :columns="staticColumns" :pagination="false" :data-source="tableList" :loading="loading">
                <span slot="options" slot-scope="text, record" @click.stop>
                    <template>
                        <a-space size="small">
                            <AddButton :id="record['id']" :otherData="processData" :onRefresh="getList"></AddButton>
                            <DeleteButton :menuId="menuId" :ids="record.id" :onRefresh="onRefresh">
                            </DeleteButton>
                            <!-- <CodeBUtton v-if="[977].includes(Number(menuId)) && staticData.isCode" :menuId="menuId"
                                :ids="record[rowKeySet[Number(menuId)]]" :onRefresh="onRefresh" :aParams="aParams"
                                :record="record">
                            </CodeBUtton>
                            <DeleteButton :menuId="menuId" :ids="record[rowKeySet[Number(menuId)]]"
                                :onRefresh="onRefresh" v-if="![994, 995].includes(Number(menuId))">
                            </DeleteButton>
                            <template v-if="[994,].includes(Number(menuId)) && false">
                                <ChangeBtn :item="record" :onRefresh="onRefresh"></ChangeBtn>
                            </template> -->
                        </a-space>
                    </template>
                </span>
            </a-table>
        </div>
        <div class="TixTableWrap-page">
            <a-space>
                共<span style="padding: 0px 4px">{{ total }}</span>条
            </a-space>
            <a-pagination v-model="page.pageNum" :total="total" show-size-changer :page-size="page.pageSize"
                @showSizeChange="onShowSizeChange" @change="onShowSizeChange" size="small">
            </a-pagination>
        </div>
    </div>
</template>

<script>
import { staticColumns } from './staticData';
import AddButton from './AddButton.vue';
import DeleteButton from '@/views/manage/components/DeleteButton';

export default {
    name: 'TixTable',
    props: {
        menuId: {
            type: [Number, String],
        },
        processData: {
            type: Object,
        }
    },
    components: {
        AddButton,
        DeleteButton,
    },
    data() {
        return {
            staticColumns,
            tableList: [],
            page: {
                pageSize: 10,
                pageNum: 1,
            },
            total: 0,
            loading: false,
        }
    },
    mounted() {
    },
    methods: {
        getList(aParams) {
            let params = {
                ...this.processData,
                ...this.page,
                ...aParams,
            };
            this.loading = true;
            this.getAxios(this.$getProcessReminderPage, params)
                .then((res) => {
                    if (res.code == 200) {
                        this.tableList = res.data.records;
                        this.total = res.data.total;
                    }
                })
                .catch(() => { })
                .finally(() => {
                    this.loading = false;
                });
        },
        onShowSizeChange(current, pageSize) {
            console.log('paginChange==current==', current);
            console.log('paginChange==pageSize==', pageSize);
            this.page = {
                ...this.page,
                pageSize: pageSize,
                pageNum: current,
            }
            this.getList();
        },
    },
    watch: {
        processData: {
            handler(nVal, oVal) {
                this.page = {
                    ...this.page,
                    pageNum: 1,
                }
                if (nVal.company) {
                    this.getList({ company: nVal.company, ...this.page })
                }
            },
            immediate: true,
            deep: true,
        }
    }
}
</script>

<style lang="less" scoped>
.TixTableWrap {
    height: 100%;
    width: 100%;

    &-table {
        height: calc(100% - 40px);

        ::v-deep {

            .ant-table-thead>tr>th {
                background-color: #f5f7fa;
            }
        }

    }

    &-page {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        padding: 0px 12px;
        border-top: 1px solid #cdcdcd;
    }
}
</style>